<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		div{
			width: 300px;
			height: 300px;
			background-color: #ccc;
			margin:80px;
			display: flex;
			justify-content: space-between;
			/*align-items: flex-end;*/
			/*flex-direction: row;
			flex-wrap: wrap;*/
			/*flex-flow: row wrap*/
		}

		div p{
			/*width: 88px;*/
			/*flex: 1;*/
			width: 50px;
			height: 80px;
			background-color: red;
			/*border:1px solid red;*/
			/*margin-right: 10px;*/
			/*float: left;*/
		}

		div p:nth-child(2){
			width: 150px;
			flex:initial;
			background-color: orange;
			/*flex: 2;*/
		}

		/*
			div:300px;-->300%50%=150px

			p:88+2+10-->88*45%+2+10=100*50%



		*/
		


	</style>
</head>
<body>
	<div>
		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
	</div>
</body>
</html>







